<template>
<div>
    <Row>
        编号：<Input v-model="page.action_data.number" style="width: 200px"></Input>
        标题：<Input v-model="page.action_data.title" style="width: 200px"></Input>
        <Button type="ghost" @click="selectChange()">搜索</Button>
        <Button type="success" style="float:right;" :disabled="disabledButton('112911')" @click="publicservice()">发布新服务</Button>
    </Row>
    <AutoTable :columns="table.columns" :data="serviceList" :page="page"></AutoTable>

    <Modal v-model="create_modal" width="75">
        <p slot="header" style="color:#f60;text-align:center">
            <span>创建平台服务</span>
        </p>
        <Form ref="create_modal" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="服务名称" prop="title">
                <Input v-model="formValidate.title"></Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="text" size="large" @click="create_modal=false">取消</Button>
            <Button type="primary" size="large" @click="handleCreate">确定</Button>
        </div>
    </Modal>

    <Modal v-model="modify_modal" width="75">
        <p slot="header" style="color:#f60;text-align:center">
            <span>完善平台服务</span>
        </p>
        <Form ref="modify_modal" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="服务名称" prop="title">
                <Input v-model="formValidate.title"></Input>
            </FormItem>
            <FormItem label="服务介绍" prop="content">
                <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 3,maxRows: 10}"></Input>
            </FormItem>
            <FormItem label="服务流程">
                <Card>
                    <StepsEditor mode="edit" :source="formValidate" source-type="service"></StepsEditor>
                </Card>
            </FormItem>
            <Row>
                <Col>
                    <FormItem label="附件" prop="appendix">
                        <UploadedList  v-model="formValidate.appendix" :format="['doc','docx','pdf']"></UploadedList>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="text" size="large" @click="modify_modal=false">取消</Button>
            <Button type="primary" size="large" @click="handleModify">确定</Button>
        </div>
    </Modal>
</div>
</template>
<script>
import PlateformService from "@/common/model/PlateformService"
import Page from "@/common/model/Page";
import AutoTable from "@/common/components/AutoTable";
import UploadedList from "@/common/components/UploadedList";
import StepsEditor from "@/common/components/StepsEditor"
import parent from "../Parent";
export default {
    extends:parent,
    components: {
        AutoTable,UploadedList,StepsEditor
    },
    data(){
        return{
            formValidate: new PlateformService(),
            ruleValidate: {
                title:[
                    {required: true, message: '服务标题不能为空', trigger: 'blur'}
                ],
                content:[
                    {required: true, message: '服务内容不能为空', trigger: 'blur'}
                ]
            },
            create_modal: false,
            modify_modal: false,
            page: new Page("plateformservice/get_all_service"), //分页查询接口
            table: {
                columns: [
                    {
                        title: '序号', width: 65, align: 'center', render: (h, params) => {
                            return h('div', (this.page.current_page - 1) * this.page.page_size + params.index + 1);
                        }
                    },
                    {
                        title: '编号', render:(h, params) => {
                            return h('div', params.row.number);
                        }
                    },
                    {
                        title: '服务名称', key: 'title'
                    },
                    {
                        title: '简介', key:'content'
                    },
                    {
                        title: '发布日期', width: 150, align: 'center', key: 'create_time', sortable: "custom", render: (h, params) => {
                            return h('div',params.row.formated_create_time);
                        }
                    },                    
                    {
                        title: '当前状态', width: 100, align: 'center', render:(h,params) => {
                            return h('div',[
                                h('Button',{
                                    props : { type:["","error","success"][params.row.status],size:'small' },
                                    style : { marginRight: '5px' }
                                },["","未发布","已发布"][params.row.status])
                            ]);
                        }
                    },
                    {
                        title: '操作', key: 'action', width: 350, align: 'center', render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small', disabled: this.disabledButton("112913") },
                                    style: { marginRight: '5px' },
                                    on: { click: () => { this.handleEdit(params.row.id) } }
                                }, '完善信息'),
                                h('Button', {
                                    props: { type: params.row.isvisiable == 0 ? 'ghost' : 'info', size: 'small', disabled: this.disabledButton("112919") },
                                    style: { marginRight: '5px' },
                                    on: { click: () => { this.handleStatus(params.row) }}
                                }, params.row.isvisiable == 0 ? '已隐藏' : '已公开'),
                                h('Button', {
                                    props: { type: 'error', size: 'small', disabled: this.disabledButton("112912") },
                                    style: { marginRight: '5px' },
                                    on: { click: () => { this.handleDelete(params.row) } }
                                }, '删除')
                            ]);
                        }
                    },
                ]
            }
        }
    },
    computed:{
        serviceList(){
            return PlateformService.parseList(this.page.list);
        },
    },
    methods:{
        cancel(){},
        handleStatus(row) {
            this.api.post("plateformservice/isvisiable", { id: row.id, isvisiable: 1 - row.isvisiable }, res => {
                row.isvisiable = 1 - row.isvisiable;
            });
        },
        dateformat(a){
            return new Date(parseInt(a)).toLocaleDateString();
        },
        selectChange(){
            this.page.current_page = 1;
            this.page.getData();
        },
        publicservice(){
            this.formValidate=new PlateformService();
            this.create_modal=true;
        },
        handleDelete(row){
            this.api.post("plateformservice/delete",{id:row.id},res=>{
                if(res.value){
                    this.$CustomMessage.success('删除成功');
                }else{
                    this.$CustomMessage.error('删除失败');
                }
                this.page.getData();
            });
        },
        handleEdit(id) {
            this.getPlateformServiceDetail(id);
            this.modify_modal = true;
        },
        handleCreate() {
            this.$refs["create_modal"].validate((valid)=>{
                if(valid){
                    this.api.post("plateformservice/post", this.formValidate.serialize(), res => {
                        this.$CustomMessage.success('创建成功');
                        this.page.getData();
                        this.handleEdit(res.id);
                        this.create_modal = false;
                    });
                }
            });
        },
        handleModify(){
            this.$refs["modify_modal"].validate((valid)=>{
                if(valid){
                    this.api.post("plateformservice/modify", this.formValidate.serialize(), res => {
                        this.$CustomMessage.success('信息完善成功');
                        this.page.getData();
                        this.modify_modal = false;
                    });
                }else {
                    this.$CustomMessage.warning('表单填写错误');
                }
            });
        },
        getPlateformServiceDetail(id) {
            this.api.post("plateformservice/get", { id: id }, res => {
                this.formValidate = PlateformService.parse(res.data);
            });
        }
    }
}
</script>



